<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

 <input type="text" id ="i" class="oiu">
<!-- <div id="d" style="width: 100px;height: 100px;background-color: red" onclick="abc()"></div>-->
 <button type="button" onclick="abc()">按钮</button>

 <script>
                    //以下都为改属性

   //此函数的作用是通过事件，来触发一些效果
   function abc(){
     //此时的 i 代表的是整个input标签
     var i =document.getElementById('i')

     //将明文设置为密文 为HTMLDOM方法对属性的操作
     // i.type="password"

     //明文密文切换
     if(i.type == 'password'){
         i.type = 'text';
     }  else {
         i.type = 'password'
     }

     //如果不写等号右边，则是输出他的属性值
     // console.log(i.type)
     // i.className='dsadh';
     //
     // var d =document.getElementById('d');
     // d.style.backgroundColor='#000000'

     //对class的增，删，改，查
     //增和改，方法相同，当class没有值时直接赋值为增，有值时便为改。
     // i.className='dsadh'

     //查 不进行赋值，直接控制台输出
     // console.log(i.className)

      //删 在已有class的情况下，赋空值便为删
      // i.className='';
   }
 </script>

</body>
</html>